<template>
  <!-- 导航条 -->
  <view class="box">
    <view style="height: 8px"></view>
    <view class="navbar">
      <!-- <text class="logo" @click="back">
        <uni-icons type="left" size="30"></uni-icons>
      </text> -->
      <text class="title">工作台</text>
      <view class="caogao">
        <uni-icons type="notification" @click="message" size="28"></uni-icons>
        <text v-if="messagelist.length > 0" class="biao"></text>
      </view>
    </view>
    <image
      style="height: 200px"
      src="@/static/images/首页/u3701.png"
      mode="scaleToFill"
    />
    <uni-section title="" type="line" padding>
      <uni-grid :column="4" :highlight="true" @change="change">
        <uni-grid-item
          v-for="(item, index) in list"
          :index="index"
          :key="index"
        >
          <view
            @click="navigatorTo(item.to)"
            class="grid-item-box"
            style="background-color: #fff"
          >
            <image
              style="width: 40%"
              src="@/static/images/首页/u3685.svg"
              mode="scaleToFill"
            />
            <text class="text"> {{ item.name }} </text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-section>
    <view class="apply">
      <view class="apply_top">
        <text style="font-size: 17px; font-weight: 700">我的申请</text>
        <navigator url="/pages/index/application" hover-class="none">
          <text>
            更多
            <uni-icons type="right" size="18" />
          </text>
        </navigator>
      </view>
      <view
        @click="clickDetail(item)"
        v-for="(item, index) in data"
        :key="index"
        class="apply_box"
      >
        <view class="apply_zhong">
          <text
            >{{ item.startUsername }}的{{ item.processDefinitionName }}</text
          >
          <text
            v-if="item.processIsFinished === 'reject'"
            class="apply_zhong_bs"
            >{{ statusbar(item.processIsFinished) }}</text
          >
          <text v-else class="apply_zhong_bt">{{
            statusbar(item.processIsFinished)
          }}</text>

          <text style="color: #b2aaaa; font-size: 12px">{{
            item.createTime
          }}</text>
        </view>
        <view class="apply_bottom">
          <view>申请理由：{{ item.variables.approveReason?item.variables.approveReason: item.variables.useReason }} </view>
          <view
            v-if="item.processIsFinished === 'reject'"
            style="color: #e24959; margin: 10px 0 0 0"
          >
            驳回原因：{{ fullMessage(item) }}
          </view>
          <u-button v-if="item.processIsFinished === 'reject'" class="cxedit">
            重新修改
          </u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { sendList, messageList } from "@/api/index";
export default {
  name: "MinirabbitIndex",

  data() {
    return {
      list: [
        {
          name: "发文申请",
          to: "/pages/dispatch/index",
        },
        {
          name: "用章申请",
          to: "/pages/chapters/index",
        },
        {
          name: "用车申请",
          to: "/pages/usecar/index",
        },
        {
          name: "车辆管理",
          to: "/pages/vehiclemanagement/index",
        },
        {
          name: "驾驶员管理",
          to: "/pages/drivermanagement/index",
        },
        {
          name: "车辆费用明细",
          to: "/pages/vehiclefees/index",
        },
      ],
      data: [],
      messagelist: [],
      status: [
        {
          label: "进行中",
          value: "unfinished",
        },
        {
          label: "已完成",
          value: "finished",
        },
        {
          label: "已终结",
          value: "terminate",
        },
        {
          label: "已撤销",
          value: "withdraw",
        },
        {
          label: "已撤回",
          value: "recall",
        },
        {
          label: "被驳回",
          value: "reject",
        },
        {
          label: "已删除",
          value: "deleted",
        },
      ],
    };
  },
  async onShow() {
    //申请列表
    const res = await sendList({
      size: 2,
    });
    this.data = res.data.records;
    //消息列表
    const ress = await messageList();
    this.messagelist = ress.data.records;
  },
  mounted() {},

  methods: {
    message() {
      uni.navigateTo({
        url: "/pages/index/messageReminders",
      });
    },

    clickDetail(item) {
      if (item.processIsFinished !== "reject") {
        if (item.processDefinitionKey === "office-article") {
          //发文申请详情
          uni.navigateTo({
            url: `/pages/cardetail/dispatchdetail?row=${JSON.stringify(
              item
            )}&type=1`,
          });
        } else if (item.processDefinitionKey === "office-seal") {
          // 用章申请详情
          uni.navigateTo({
            url: `/pages/cardetail/chaptersdetail?row=${JSON.stringify(
              item
            )}&type=1`,
          });
        } else if (item.processDefinitionKey === "office-car") {
          //用车申请详情
          uni.navigateTo({
            url: `/pages/cardetail/index?row=${JSON.stringify(item)}&type=1`,
          });
        }
      } else {
        //驳回重新修改

        if (item.processDefinitionKey === "office-article") {
          //发文申请详情
          uni.navigateTo({
            url: `/pages/dispatch/index?row=${JSON.stringify(item)}`,
          });
        } else if (item.processDefinitionKey === "office-seal") {
          // 用章申请详情
          uni.navigateTo({
            url: `/pages/chapters/index?row=${JSON.stringify(item)}`,
          });
        } else if (item.processDefinitionKey === "office-car") {
          //用车申请详情
          uni.navigateTo({
            url: `/pages/usecar/index?row=${JSON.stringify(item)}`,
          });
        }
      }
    },
    // 驳回原因
    fullMessage(item) {
      const res = item.comments.find((items) => {
        return items.type === "rollbackComment";
      });
      return res?.fullMessage;
    },
    statusbar(val) {
      return this.status.find((item) => item.value === val).label;
    },
    navigatorTo(to) {
      uni.navigateTo({
        url: to,
      });
    },
    change(val) {
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #f2f2f2;
}
.navbar {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-image: url("@/static/dispatch.png");
  .title {
    padding-left: 44%;
    font-size: 19px;
    font-weight: 600;
  }
  .caogao {
    display: inline-block;
    margin-left: 25%;
    .biao {
      width: 8px;
      height: 8px;
      display: inline-block;
      background-color: red;
      border-radius: 8px;
      margin: 0 0 20px 0;
    }
  }
}
.apply {
  width: 100%;
  margin: 10px 0;
  background-color: #fff;
  .apply_top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    padding: 12px;
  }
  .apply_box {
    .apply_zhong {
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      .apply_zhong_bt {
        padding: 1px 5px;
        margin-left: 30px;
        color: #21bd49;
        border: 1px solid #21bd49;
        border-radius: 5px;
      }
      .apply_zhong_bs {
        padding: 1px 5px;
        margin-left: 30px;
        color: #e56031;
        border: 1px solid #e56031;
        border-radius: 5px;
      }
    }
    .apply_bottom {
      font-size: 13px;
      padding: 8px 10px 20px;
      border-bottom: 1px solid #dddddd;
      .cxedit {
        width: 20%;
        text-align: right;
        background-color: #169bd5;
        border-radius: 5px;
        color: #fff;
        padding: 10px 0;
        margin-left: 80%;
      }
    }
  }
}
.image {
  width: 25px;
  height: 25px;
}

.text {
  font-size: 14px;
  margin-top: 5px;
}

.example-body {
  /* #ifndef APP-NVUE */
  // display: block;
  /* #endif */
}

.grid-dynamic-box {
  margin-bottom: 15px;
}

.grid-item-box {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.grid-item-box-row {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.grid-dot {
  position: absolute;
  top: 5px;
  right: 15px;
}

.swiper {
  height: 420px;
}

/* #ifdef H5 */
@media screen and (min-width: 768px) and (max-width: 1425px) {
  .swiper {
    height: 630px;
  }
}

@media screen and (min-width: 1425px) {
  .swiper {
    height: 830px;
  }
}

/* #endif */
</style>